<template>
  <div class="c-feedback">
    <div style="width:100%;display:inline-block">
      <p class="c-title">{{sType}}
      </p>
    </div>
    <div class="c-line">
      <p>主题</p>
      <el-input
        placeholder="请输入内容"
        v-model="topic"
        clearable>
      </el-input>
    </div>
    <div class="c-line">
      <p>详细说明</p>
      <el-input
        type="textarea"
        :rows="12"
        placeholder="请输入内容"
        v-model="context">
      </el-input>
    </div>
    <div style="margin:30px auto;display:flex;justify-content:flex-end">
      <el-button v-if="!disable" type="primary" @click="commitText">提交</el-button>
      <el-button v-else type="primary" @click="$router.back(-1)">返回</el-button>
    </div>
  </div>
</template>

<script>
import { error, success } from '@/utils/toast'
import { feedbackService } from '@/api/login'
export default {
  name: "feedback",
  components: {
  },  
  data() {
    return {
      sType:'',
      topic:'',
      context:'',
      disable:false,
    }
  },
  created() {
    switch (this.$route.query.type) {
    case 'tipoff':
      this.sType = "有害举报"
      break
    case 'complain':
      this.sType = "版权投诉"
      break
    case 'suggestion':
      this.sType = "意见反馈"
      break
    default:
      this.sType = "联系我们"
      break
    }
  },
  methods: {
    async commitText() {
      if (this.topic == "" ||  this.context == "") {
        this.$router.back(-1)
        return
      }

      const resp = await feedbackService({
        type:this.$route.query.type,
        topic: this.topic,
        context: this.context,
      })

      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.disable = true
      success("提交成功，请等管理员处理, 5秒后将离开本界面")
      setTimeout(() => {
        this.$router.back(-1)
      }, 5000);
    }
  }
}
</script>

<style lang="scss" scoped>
  .c-feedback {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 1300px;
    height: 100%;
    margin: 0 auto;
    border: none;
    text-align: left;
  }

  .c-title {
    font-size:22px;
    font-weight:600;
    margin:40px auto 0px auto;
  }

  .c-line {
    margin: 30px auto 10px auto;
    p {
      margin-bottom: 5px;
    }
  }
</style>